
<template>
  <div>
    <el-button type="text" @click="addStu()">添加</el-button>

    <el-table
  
      :data="
        tableNowData.filter(
          (data) =>
            !search || data.name.toLowerCase().includes(search.toLowerCase())
        )
      "
      style="width: 100%"
    >
      <el-table-column align="center" label="学号" prop="stuId">
      </el-table-column>

      <el-table-column label="姓名" prop="stuName"> </el-table-column>
      <el-table-column label="性别" prop="stuSex"></el-table-column>
      <el-table-column label="年龄" prop="stuAge"></el-table-column>
      <el-table-column label="班级" prop="className"></el-table-column>

      <el-table-column align="left">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button type="text" @click="editStu(scope.row)">修改</el-button>
          <!-- 修改 -->

          <!-- 修改结束 -->
          <el-button size="mini" type="danger" @click="open(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
     :page-size="10"
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="currentChange"
    >
    </el-pagination>
    <!-- 修改 -->
    <dialogs
      :visible="formvisible"
      :title="dialogTitle"
      :formData="formdata"
      @close="closelog"
      @gettableData="gettableData(arguments)"
      :classData="classData"
    ></dialogs>
    <!-- 新增 -->
  </div>
</template>

<script>
import * as api from "../utils/api";
import LoginVue from "./Login.vue";
import dialogs from "../components/zhldialog.vue";

export default {
  name: "zhlStudent",
  data() {
    return {
      formvisible: false,
      tableData: [],
      search: "",
      NowData: {},
      nowPage: 1,
      radio: "1",
      dialogFormVisible: false,
      formdata: {},
      classData: [],
      formLabelWidth: "120px",
      titleMap: {
        addData: "添加学生信息",
        updateData: "修改学生信息",
      },
      dialogTitle: "",
    };
  },
  components: { dialogs },
  computed: {
    tableNowData() {
      let start = (this.nowPage - 1) * 10;
      let stop = start + 10;
      this.NowData = this.tableData.slice(start, stop);
      return this.NowData;
    },
    total(){
      console.log(this.tableData.length)
    
     return this.tableData.length
    }
  },
  
  methods: {
    getClass() {
      this.axios({
        url: api.GET_CLASSDATA,
        method: "get",
        params: { stuId: 1 },
      }).then((data) => {
        console.log("点击了");
        console.log(data);

        this.classData = data.data.data;
      });
    },
    //打开删除弹框
    open(item) {
      this.$confirm("此操作将永久删除该学生, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(item);
          this.axios({
            url: api.POST_DELSTUDATA,
            method: "post",
            data: {
              stuId: item.stuId,
            },
          })
            .then((data) => {
              console.log("删除");
              console.log(data);
              if (data.data.state.code === 200) {
                this.tableData = data.data.data;
                console.log(this.tableData);
                this.$message({
                  type: "success",
                  message: `删除成功`,
                });
              }
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        })
        .catch((data) => {});
    },

    currentChange(val) {
      this.nowPage = val;
    },
    editStu(item) {
      this.formvisible = true;
      this.formdata = { ...item };
      this.dialogTitle = this.titleMap.updateData;
      //请求班级列表
      this.getClass();
    },

    addStu() {
      this.formvisible = true;
      console.log("点击添加");
      this.formdata={
          stuName:'',
          stuId:'',
          stuAge:'',
          stuSex:'',
          classId:'',

      }
     

      this.dialogTitle = this.titleMap.addData;
      
      //请求班级列表
      this.getClass();
    },
    //修改保存

    closelog() {
      //关闭
      this.formvisible = false;
    },
    gettableData(e) {
      console.log("新增/修改更新表格数据了");
      console.log(e);
      this.tableData = e[0];
       console.log(this.tableData);
       console.log(this.tableData.length);
    },
  },
  created() {
    this.axios({
      url: api.GET_STUDATA,
      method: "get",
      params: { stuId: 1 },
    }).then((data) => {
      console.log(data);
      this.tableData = data.data.data;
    });
  },
};
</script>

<style lang="less">
</style>